<template>
  <div>
    <div class="radios-box">
      <el-radio-group v-model="tabIndex" @change="jumpInfo">
        <el-radio-button :label="1" name="1">车辆检测和评定登记表</el-radio-button>
      </el-radio-group>
    </div>
    <div style="padding:0px 50px 30px">
      <el-row>
        <el-col :span="24">
          <div style="margin: 20px 0 30px">
            <el-button :disabled="!$store.getters.pageAuth.authoritySearch" size="mini" @click="search">搜索</el-button>
            <el-button :disabled="!$store.getters.pageAuth.authoritySearch" size="mini" @click="refresh">重置</el-button>
            <el-button :disabled="!$store.getters.pageAuth.authorityAdd" size="mini" @click="add">增加</el-button>
            <el-button :disabled="!$store.getters.pageAuth.authorityDown" size="mini" @click="downloadExl">Excel下载</el-button>
            <excel-upload style="top: 10px; left: 10px" type="carCheck"/>
          </div>
          <el-table
            :data="recordSearchObj"
            :border="true"
            :header-cell-style="{background:'#eef1f6',color:'#606266'}"
            class="customTableStyle"
            style="font-size:12px;">
            <el-table-column
              type="index"
              label="编号"
              min-width="80"/>
            <el-table-column
              label="车牌号"
              min-width="110">
              <template slot-scope="scope">
                <el-select size="mini" filterable allow-create clearable v-model="scope.row.cph" placeholder="请选择">
                    <el-option
                      v-for="item in cpList"
                      :key="item.zxcph"
                      :label="item.zxcph"
                      :value="item.zxcph">
                    </el-option>
                  </el-select>
              </template>
            </el-table-column>
            <el-table-column
              label="检测/评定类别"
              min-width="110">
              <template slot-scope="scope">
                <el-select size="mini" filterable clearable v-model="scope.row.jcpdlb" placeholder="请选择">
                  <el-option
                    v-for="item in checktypeList"
                    :key="item.id"
                    :label="item.cplb"
                    :value="item.cplb">
                  </el-option>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column
              label="检测/评定单位"
              min-width="110">
              <template slot-scope="scope">
                <el-select size="mini" filterable clearable v-model="scope.row.jcpddw" placeholder="请选择">
                  <el-option
                    v-for="item in checkorgList"
                    :key="item.id"
                    :label="item.cpdw"
                    :value="item.cpdw">
                  </el-option>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column
              label="检测/评定日期"
              min-width="180">
              <template slot-scope="scope">
                <el-date-picker
                  size="mini"
                  clearable
                  v-model="scope.row.jcpdrq[0]"
                  value-format="yyyy-M-d"
                  type="date"
                  class="datePicker"
                  placeholder="开始日期">
                </el-date-picker>
                <el-date-picker
                  size="mini"
                  clearable
                  v-model="scope.row.jcpdrq[1]"
                  value-format="yyyy-M-d"
                  type="date"
                  class="datePicker"
                  placeholder="结束日期">
                </el-date-picker>
              </template>
            </el-table-column>
            <el-table-column
              label="检测有效截止日期"
              min-width="180">
              <template slot-scope="scope">
                <el-date-picker
                  size="mini"
                  clearable
                  v-model="scope.row.jcyxjzrq[0]"
                  value-format="yyyy-M-d"
                  type="date"
                  class="datePicker"
                  placeholder="开始日期">
                </el-date-picker>
                <el-date-picker
                  size="mini"
                  clearable
                  v-model="scope.row.jcyxjzrq[1]"
                  value-format="yyyy-M-d"
                  type="date"
                  class="datePicker"
                  placeholder="结束日期">
                </el-date-picker>
              </template>
            </el-table-column>
            <el-table-column
              label="报告编号"
              min-width="110">
              <template slot-scope="scope">
                <el-input size="mini" v-model="scope.row.bgbh" placeholder="请输入内容"></el-input>
              </template>
            </el-table-column>
            <el-table-column
              label="登记人员"
              min-width="110">
              <template slot-scope="scope">
                <el-select size="mini" filterable clearable v-model="scope.row.djry" placeholder="请选择">
                  <el-option
                    v-for="item in sjList"
                    :key="item.xm"
                    :label="item.xm"
                    :value="item.xm">
                  </el-option>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column
              label="备注"
              min-width="140">
              <template slot-scope="scope">
                <el-input size="mini" v-model="scope.row.bz" placeholder="请输入内容"></el-input>
              </template>
            </el-table-column>
            <el-table-column
              label="操作"
              min-width="150">
              <template slot-scope="scope">
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            :total="page.totalCount"
            :page-size="page.pageSize"
            :current-page.sync="page.currPage"
            style="margin-top: 10px;"
            background
            layout="total, slot, prev, pager, next"
            @current-change="search">
            <span>—&nbsp;&nbsp;&nbsp;共 {{page.totalPage}} 页</span>
          </el-pagination>
          <div v-if="addVisi" style="margin-top: 20px">
            <el-row>
              <el-col :span="24">
                <el-card class="box-card">
                  <div slot="header" class="clearfix">
                    <span>增加</span>
                    <el-button style="float: right; font-size:12px; padding: 7px 15px;margin-left:10px" type="text" @click="addClick">保存</el-button>
                    <el-button style="float: right; font-size:12px; padding: 7px 15px;" type="text" @click="addVisi = false">取消</el-button>
                  </div>
                  <div>
                    <el-table
                      :data="addRecord"
                      :border="true"
                      :header-cell-style="{background:'#eef1f6',color:'#606266'}"
                      class="customTableStyle"
                      style="font-size:12px;">
                      <el-table-column
                        label="车牌号"
                        min-width="110">
                        <template slot-scope="scope">
                          <el-select size="mini" filterable clearable v-model="scope.row.cph" placeholder="请选择">
                              <el-option
                                v-for="item in cpList"
                                :key="item.zxcph"
                                :label="item.zxcph"
                                :value="item.zxcph">
                              </el-option>
                            </el-select>
                        </template>
                      </el-table-column>
                      <el-table-column
                        label="检测/评定类别"
                        min-width="120">
                        <template slot-scope="scope">
                          <el-select size="mini" filterable clearable v-model="scope.row.jcpdlb" placeholder="请选择">
                            <el-option
                              v-for="item in checktypeList"
                              :key="item.id"
                              :label="item.cplb"
                              :value="item.cplb">
                            </el-option>
                          </el-select>
                        </template>
                      </el-table-column>
                      <el-table-column
                        label="检测/评定单位"
                        min-width="110">
                        <template slot-scope="scope">
                          <el-select size="mini" filterable clearable v-model="scope.row.jcpddw" placeholder="请选择">
                            <el-option
                              v-for="item in checkorgList"
                              :key="item.id"
                              :label="item.cpdw"
                              :value="item.cpdw">
                            </el-option>
                          </el-select>
                        </template>
                      </el-table-column>
                      <el-table-column
                        label="检测/评定日期"
                        min-width="180">
                        <template slot-scope="scope">
                          <el-date-picker
                            size="mini"
                            clearable
                            v-model="scope.row.jcpdrq"
                            value-format="yyyy-M-d"
                            type="date"
                            class="datePicker"
                            placeholder="选择日期">
                          </el-date-picker>
                        </template>
                      </el-table-column>
                      <el-table-column
                        label="检测有效截止日期"
                        min-width="180">
                        <template slot-scope="scope">
                          <el-date-picker
                            size="mini"
                            clearable
                            v-model="scope.row.jcyxjzrq"
                            value-format="yyyy-M-d"
                            type="date"
                            class="datePicker"
                            placeholder="选择日期">
                          </el-date-picker>
                        </template>
                      </el-table-column>
                      <el-table-column
                        label="报告编号"
                        min-width="110">
                        <template slot-scope="scope">
                          <el-input size="mini" v-model="scope.row.bgbh" placeholder="请输入内容"></el-input>
                        </template>
                      </el-table-column>
                      <el-table-column
                        label="登记人员"
                        min-width="110">
                        <template slot-scope="scope">
                          <el-select size="mini" filterable clearable v-model="scope.row.djry" placeholder="请选择">
                            <el-option
                              v-for="item in sjList"
                              :key="item.xm"
                              :label="item.xm"
                              :value="item.xm">
                            </el-option>
                          </el-select>
                        </template>
                      </el-table-column>
                      <el-table-column
                        label="备注"
                        min-width="140">
                        <template slot-scope="scope">
                          <el-input size="mini" v-model="scope.row.bz" placeholder="请输入内容"></el-input>
                        </template>
                      </el-table-column>
                    </el-table>
                  </div>
                </el-card>
              </el-col>
            </el-row>
          </div>
          <el-table
            :data="page.list"
            :border="true"
            :header-cell-style="{background:'#eef1f6',color:'#606266'}"
            highlight-current-row
            @row-click="rowClick"
            class="customTableStyle"
            style="font-size:12px;">
            <el-table-column
              type="index"
              label="编号"
              min-width="80"/>
            <el-table-column
              label="车牌号"
              min-width="110">
              <template slot-scope="scope">
                <div v-if="editVisi && scope.row.id == editRecord.id">
                  <el-select size="mini" filterable clearable v-model="editRecord.cph" placeholder="请选择">
                    <el-option
                      v-for="item in cpList"
                      :key="item.zxcph"
                      :label="item.zxcph"
                      :value="item.zxcph">
                    </el-option>
                  </el-select>
                </div>
                <div v-else>{{ scope.row.cph }}</div>
              </template>
            </el-table-column>
            <el-table-column
              label="检测/评定类别"
              min-width="110">
              <template slot-scope="scope">
                <div v-if="editVisi && scope.row.id == editRecord.id">
                  <el-select size="mini" filterable clearable v-model="editRecord.jcpdlb" placeholder="请选择">
                    <el-option
                      v-for="item in checktypeList"
                      :key="item.id"
                      :label="item.cplb"
                      :value="item.cplb">
                    </el-option>
                  </el-select>
                </div>
                <div v-else>{{ scope.row.jcpdlb }}</div>
              </template>
            </el-table-column>
            <el-table-column
              label="检测/评定单位"
              min-width="110">
              <template slot-scope="scope">
                <div v-if="editVisi && scope.row.id == editRecord.id">
                  <el-select size="mini" filterable clearable v-model="editRecord.jcpddw" placeholder="请选择">
                    <el-option
                      v-for="item in checkorgList"
                      :key="item.id"
                      :label="item.cpdw"
                      :value="item.cpdw">
                    </el-option>
                  </el-select>
                </div>
                <div v-else>{{ scope.row.jcpddw }}</div>
              </template>
            </el-table-column>
            <el-table-column
              label="检测/评定日期"
              min-width="180">
              <template slot-scope="scope">
                <div v-if="editVisi && scope.row.id == editRecord.id">
                  <el-date-picker
                    size="mini"
                    clearable
                    v-model="editRecord.jcpdrq"
                    value-format="yyyy-M-d"
                    type="date"
                    class="datePicker"
                    placeholder="选择日期">
                  </el-date-picker>
                </div>
                <div v-else>{{ scope.row.jcpdrq }}</div>
              </template>
            </el-table-column>
            <el-table-column
              label="检测有效截止日期"
              min-width="180">
              <template slot-scope="scope">
                <div v-if="editVisi && scope.row.id == editRecord.id">
                  <el-date-picker
                    size="mini"
                    clearable
                    v-model="editRecord.jcyxjzrq"
                    value-format="yyyy-M-d"
                    type="date"
                    class="datePicker"
                    placeholder="选择日期">
                  </el-date-picker>
                </div>
                <div v-else>{{ scope.row.jcyxjzrq }}</div>
              </template>
            </el-table-column>
            <el-table-column
              label="报告编号"
              min-width="110">
              <template slot-scope="scope">
                <div v-if="editVisi && scope.row.id == editRecord.id">
                  <el-input size="mini" v-model="editRecord.bgbh" placeholder="请输入内容"></el-input>
                </div>
                <div v-else>{{ scope.row.bgbh }}</div>
              </template>
            </el-table-column>
            <el-table-column
              label="登记人员"
              min-width="110">
              <template slot-scope="scope">
                <div v-if="editVisi && scope.row.id == editRecord.id">
                  <el-select size="mini" filterable clearable v-model="editRecord.djry" placeholder="请选择">
                    <el-option
                      v-for="item in sjList"
                      :key="item.xm"
                      :label="item.xm"
                      :value="item.xm">
                    </el-option>
                  </el-select>
                </div>
                <div v-else>{{ scope.row.djry }}</div>
              </template>
            </el-table-column>
            <el-table-column
              label="备注"
              min-width="140">
              <template slot-scope="scope">
                <div v-if="editVisi && scope.row.id == editRecord.id">
                  <el-input size="mini" v-model="editRecord.bz" placeholder="请输入内容"></el-input>
                </div>
                <div v-else>{{ scope.row.bz }}</div>
              </template>
            </el-table-column>
            <el-table-column
              label="操作"
              min-width="150">
              <template slot-scope="scope">
                <div v-if="editVisi && scope.row.id == editRecord.id">
                  <el-button size="mini" @click="editClick">保存</el-button>
                  <el-button size="mini" @click="editVisi = false">取消</el-button>
                </div>
                <div v-else>
                  <el-button :disabled="!$store.getters.pageAuth.authorityUpdate" size="mini" @click="edit(scope.row)">修改</el-button>
                  <el-button :disabled="!$store.getters.pageAuth.authorityDelete" size="mini" @click="deleteClick(scope.row.id)">删除</el-button>
                </div>
                
              </template>
            </el-table-column>
          </el-table>
          
        </el-col>
      </el-row>
      <div v-if="activeRecord.id">
        <el-row>
          <el-col :span="24">
            <el-row>
              <div class="upload-scrollcontainer">
                <div class="upload-scrollbox" :style="{width: (activeImgList.length+1) * 160 + 'px'}">
                  <div class="upload-container">
                    <imgUpload :id="activeRecord.id" type="carCheck" @success="getImgList"/>
                  </div>
                  <div v-for="(item, index) in activeImgList" :key="item.path" class="upload-container">
                    <div class="upload-title">{{index +1}}&nbsp;&nbsp;{{ item.bz }}</div>
                    <div class="upload-pic-box">
                      <img :src="item.path" alt="" @click="$imageViewer">
                    </div>
                    <i class="el-icon-delete upload-del" @click.stop="imgDel(item.name)"></i>
                  </div>
                </div>
              </div>
            </el-row>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-row>
              <div>
                <!-- <el-button size="mini" @click="printPic">图片打印</el-button> -->
              </div>
            </el-row>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
import adapter from './adapter'
import imgUpload from '@/components/imgUpload'
import excelUpload from '@/components/excelUpload'
export default {
  name: 'checkJudge',
  filters: {
  },
  components: {
    imgUpload,
    excelUpload,
  },
  data() {
    return {
      ...adapter.data,
      tabIndex: 1, // tab序号
    }
  },
  computed: {
    ...adapter.computed
  },
  created() {
    // 初始化
    this.initPage()
    Promise.all([this.getListSj(), this.getListCp(), this.getListCheckType(), this.getListCheckOrg()]).then (() => {
      })
    this.search()
  },
  mounted() {
  },
  methods: {
    ...adapter.methods,
    /**
     * 跳转车辆/员工信息
     */
    jumpInfo(tabIndex) {
    },
  }
}
</script>
<style>
.label_img:hover+.el-button{
  background: rgba(0, 0, 102, 1);
} 
</style>
<style lang="scss" scoped>

.el-input-number{
  width: 90px;
}
.car-detail-title{
  font-size: 30px;
  text-align: center;
}
.radios-box{
  padding: 20px 0 10px 20px;
}
</style>

